<template>
  <div class="xtx-bread-item">
    <!-- 如果to有值，就渲染一个router-link标签，否则不渲染 -->
    <router-link class="active" v-if="to" :to="to">
          <slot />
    </router-link>
    <!-- 没有to值，则不用router-link标签 渲染以下标签 -->
    <span v-else> <slot /> </span>

    <!-- 分隔符  -->
    <i>{{ separator }}</i>

  </div>
</template>

<script>
import { inject } from 'vue'
export default {
  name: 'XtxBreadItem',
  props: {
    to: {
      type: String
    }
  },
  setup () {
    // 获取到上级的分隔符
    const separator = inject('separator')
    return { separator }
  }
}
</script>
<style lang="less" scoped>
  .xtx-bread-item{
    // 最后一个i隐藏
    &:nth-last-of-type(1){
      i{
        display: none;
      }
    }
  }
</style>
